<template>
  <div class="user-body">
    <div class="user-item">
      <div class="user-head">
        <div class="left-btn-group">
          <el-button type="danger" @click="changeuser">用户操作</el-button>
        </div>
        <div class="right-group">
          <el-input placeholder="请输入用户名" v-model="searchuser"></el-input>
          <!-- <el-button type="danger" @click="checkuser">查找</el-button> -->
        </div>
      </div>
      <div class="user-table">
        <el-table
          :data="list"
          style="width: 100%; height: 400px"
          :row-style="{ height: '72px' }"
          :header-cell-style="{ background: '#ebf8f8' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            label="用户名"
            width="150"
            fixed
            class-name="usernumber-column"
          >
            <template #default="scope">
              <span class="usernumber-span">
                {{ scope.row.usernumber }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="userpassword" label="密码" width="150">
          </el-table-column>
          <el-table-column
            label="姓名"
            header-align="center"
            width="100"
            align="center"
          >
            <template #default="scope">
              <span
                v-if="scope.row.realname != ''"
                style="text-align: center"
                >{{ scope.row.realname }}</span
              >
              <span v-else>未设置</span>
            </template>
          </el-table-column>
          <el-table-column
            label="性别"
            header-align="center"
            width="100"
            align="center"
          >
            <template #default="scope">
              <span
                v-if="scope.row.usersexy != ''"
                style="text-align: center"
                >{{ getsexy(scope.row.usersexy) }}</span
              >
              <span v-else>未设置</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userid"
            label="用戶id"
            header-align="center"
            width="300"
          >
          </el-table-column>
          <el-table-column
            prop="registertime"
            label="注册时间"
            header-align="center"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="logintime"
            label="最后登录时间"
            header-align="center"
            width="200"
            align="center"
          >
            <template #default="scope">
              <span
                v-if="scope.row.logintime != ''"
                style="text-align: center"
                >{{ scope.row?.logintime }}</span
              >
              <span v-else>未登录</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="overduetime"
            label="会员过期时间"
            header-align="center"
            width="200"
            align="center"
          >
            <template #default="scope">
              <span
                v-if="scope.row.overduetime != ''"
                style="text-align: center"
                >{{ scope.row?.overduetime }}</span
              >
              <span v-else>非会员</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="level"
            label="用户权限"
            :filters="[
              { text: '普通用户', value: '普通用户' },
              { text: '会员用户', value: '会员用户' },
              { text: '游客用户', value: '游客用户' },
              { text: '禁用', value: '禁用' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            align="center"
            width="100"
          >
            <template #default="scope">
              <el-tag :type="classObje(scope.row.level)" disable-transitions>{{
                scope.row?.level
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            v-if="ischange"
            align="center"
            fixed="right"
            width="180"
          >
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="openchange(scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="deleteuser(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="page-item">
        <page-view @changepage="changepage"></page-view>
      </div>
    </div>
    <div class="change-item-body" v-if="changekey">
      <el-dialog
        class="change-item"
        title="用户修改"
        v-model="changekey"
        width="60%"
      >
        <div class="change-body">
          <span
            ><b>姓名:</b>
            <p>{{ chooseuserinfo.realname }}</p></span
          >
          <span
            ><b>用户名:</b>
            <p>{{ chooseuserinfo.usernumber }}</p></span
          >
          <span
            ><b>用户id:</b>
            <p>{{ chooseuserinfo.userid }}</p></span
          >
          <span
            ><b>用户简介:</b>
            <p>{{ chooseuserinfo.usertitle }}</p></span
          >
          <span
            ><b>注册时间:</b>
            <p>{{ chooseuserinfo.registertime }}</p></span
          >
          <span
            ><b>登录时间:</b>
            <p>{{ chooseuserinfo.logintime }}</p></span
          >
          <span
            ><b>过期时间:</b>
            <p v-if="chooseuserinfo.overduetime != ''">
              {{ chooseuserinfo.overduetime }}
            </p>
            <p v-else>未购买会员</p>
          </span>
          <!-- <p>{{ chooseuserinfo.usernumber }}</p>
        <p>{{ chooseuserinfo.userid }}</p>
        <p>{{ chooseuserinfo.usertitle }}</p> -->
          <el-row>
            <el-col :span="10">
              <el-select
                v-model="chooseuserinfo.level"
                class="m-2"
                placeholder="Select"
              >
                <el-option
                  v-for="item in levellist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  style="padding-left: 10px"
                />
              </el-select>
            </el-col>
            <el-col :span="10">
              <el-input type="number" v-model="levelday" :disabled="islevelday">
                <template #append>天数</template>
              </el-input>
            </el-col>
          </el-row>
        </div>
        <div class="change-btn">
          <el-button type="primary" @click="sumbitinfo">提交</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>是否确认删除用户?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="realdelete">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
//组件引用
import PageView from "components/AdminHomeComp/PageView.vue";

import {
  getuser,
  changeuserlevel,
  deleteuser,
  getuserlen,
  changeoverduetime,
} from "network/request.js";
// import { Close } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";
export default {
  inject: ["reload"],
  data() {
    return {
      //所有用户数据
      alluserlist: [],
      //单页用户数组
      userlist: [],
      searchuser: "",
      ischeck: true,
      ischange: false,
      changekey: false,
      dialogVisible: false,
      deleteid: "",
      chooseuserinfo: {
        realname: "",
        usernumber: "",
        userid: "",
        level: "",
        id: "",
        usertitle: "",
        registertime: "",
        logintime: "",
        overduetime: "",
      },
      levellist: [
        { label: "游客用户", value: "游客用户" },
        { label: "普通用户", value: "普通用户" },
        { label: "会员用户", value: "会员用户" },
        { label: "禁用", value: "禁用" },
      ],
      levelday: 1,
      islevelday: true,
      userlevelvalue: "",
    };
  },
  components: {
    // Close,
    PageView,
  },
  computed: {
    //根据用户的会员等级 返回不同的type类型
    classObje: function () {
      return (level) => {
        if (level == "普通用户") {
          return "primary";
        } else if (level == "会员用户") {
          return "success";
        } else if (level == "游客用户") {
          return "info";
        } else if (level == "禁用") {
          return "danger";
        }
      };
    },
    list: function () {
      if (this.searchuser == "") {
        return this.userlist;
      } else {
        var arrByZM = []; //声明一个空数组来存放数据
        for (var i = 0; i < this.alluserlist.length; i++) {
          //for循环数据中的每一项（根据name值）
          if (this.alluserlist[i].usernumber.search(this.searchuser) != -1) {
            //判断输入框中的值是否可以匹配到数据，如果匹配成功
            arrByZM.push(this.alluserlist[i]);
            //向空数组中添加数据
          }
        }
        //一定要记得返回筛选后的数据
        return arrByZM;
      }
    },
  },
  watch: {
    "chooseuserinfo.level"(newvalue) {
      //  console.log(newvalue)
      if (newvalue == "会员用户") {
        this.islevelday = false;
      }else {
        this.islevelday = true
      }
    },
    levelday() {
      if(this.levelday <= 1) {
        this.levelday = 1
      }
    }
  },
  methods: {
    //显示修改按钮
    changeuser() {
      this.ischange = !this.ischange;
    },
    //修改操作
    openchange(row) {
      const that = this;
      that.changekey = !that.changekey;
      //在change-itme中显示选中用户的信息
      this.chooseuserinfo = {
        realname: row.realname,
        usernumber: row.usernumber,
        userid: row.userid,
        level: row.level,
        id: row.id,
        usertitle: row.usertitle,
        registertime: row.registertime,
        logintime: row.logintime,
        overduetime: row.overduetime,
      };
    },
    //调用方法 修改用户的会员等级
    async sumbitinfo() {
      let curdate = ''
      if(this.chooseuserinfo.overduetime == '') {
        curdate = new Date()
      }else {
        curdate = new Date(this.chooseuserinfo.overduetime);
      }
      let overdue = "";
      //当修改等级为vip时，根据levelday修改会员过期时间
      if (this.chooseuserinfo.level == "会员用户") {
        curdate = new Date((curdate / 1000 + 86400 * this.levelday) * 1000);
        overdue = curdate.toLocaleString();
        await changeoverduetime(this.chooseuserinfo.id, overdue);
      }
      else {
        await changeoverduetime(this.chooseuserinfo.id);
      }
      //修改会员等级
      await changeuserlevel(this.chooseuserinfo.id, this.chooseuserinfo.level);
      ElMessage.success("修改成功!");
      //更新页面
      this.$nextTick(() => {
        this.reload();
      });
    },
    closechange() {
      this.changekey = false;
    },

    //删除操作
    deleteuser(row) {
      //获取点击用户id
      this.deleteid = row.id;
      this.dialogVisible = true;
    },
    realdelete() {
      //调用请求删除用户
      deleteuser(this.deleteid).then(() => {
        ElNotification({
          title: "Success",
          message: "成功删除用户!",
          type: "success",
        });
        this.dialogVisible = false;
        this.reload();
      });
    },
    //动态显示用户性别
    getsexy(sexy) {
      if (sexy == "woman") {
        return "女";
      } else if (sexy == "man") return "男";

      return "保密";
    },
    filterTag(value, row) {
      return row.level === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    //接收pageview传递的事件 根据page请求不同的页数
    changepage(val) {
      // console.log(val)
      getuser(val).then(({ data: res }) => {
        this.userlist = res;
      });
    },
    tableRowClassName({ row }) {
      if (row.level == "禁用") {
        // console.log(row.level);
        return "warning-row";
      }
    },
  },
  created() {
    //页面created时请求第一页数据
    getuser().then(({ data: res }) => {
      this.userlist = res;
    });
    getuserlen().then(({ data: res }) => {
      this.alluserlist = res;
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  vertical-align: top;
}
.user-body {
  width: 100%;
}
.user-item {
  max-width: 1100px;
  // height: calc(100vh - 140px);
  margin: 0 auto;
  margin-top: 20px;
  padding: 10px;
  background-color: white;
  overflow: auto;
  position: relative;
}
.change-item-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.4);
}
.change-item {
  box-sizing: border-box;
  height: 400px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding: 20px;
  .change-body {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    span {
      display: flex;
      box-sizing: border-box;
      overflow: hidden;
      background-color: #fff;
      width: 100%;
      margin-bottom: 5px;
      height: 30px;
      line-height: 30px;
      font-size: 13px;
      b {
        text-align: right;
        width: 80px;
      }
      p {
        overflow: auto;
        padding: 0 10px;
      }
      &:nth-child(2n) {
        background-color: #f8f8f8;
      }
      &:hover {
        background-color: #f8f8f8;
      }
    }
    .el-row {
      width: 100%;
      // background-color: red;
      // justify-content:;
      .el-col {
        // background-color: yellow;
        margin-right: 10px;
      }
      .el-select {
        width: 100%;
      }
      .el-input {
        width: 100%;
      }
    }
  }
  .change-btn {
    height: 60px;
    width: 100%;
    // background-color: lightgreen;
    position: relative;
    .el-button {
      width: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.user-head {
  width: 100%;
  height: 80px;
  /* background-color: green; */
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.left-btn-group {
  /* background-color: blue; */
  height: 40px;
  width: 20%;
  display: flex;
  justify-content: space-between;
  margin: auto 0 auto 5%;
}
.right-group {
  height: 40px;
  width: 25%;
  background-color: yellow;
  margin: auto 5% auto 0;
}
.right-group .el-input {
  width: 100%;
  height: 40px;
  margin-right: 5%;
}
.left-btn-group .el-button {
  height: 40px;
  // width: 45%;
  padding: 0 10px;
}
.user-table {
  width: 90%;
  margin: 0 auto;
  border: 1px solid #ddd;
  // background-color: red;
}
.el-button {
  padding: 0 10px;
}
.el-table .el-table-column {
  height: 100px;
  padding: 30px 0;
}
.page-item {
  width: 100%;
  margin-top: 1%;
  display: flex;
  justify-content: center;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-5);
}
.usernumber-span {
  display: block;
  width: 100%;
  height: 100%;
  // background-color: yellow;
}
</style>